<template>
    <page-wrap @click="ckcDown">
        <div class="payBox">
            <my-header txt="缴费服务" backUrl="/main">
                <b style="color: #ff896b;" v-if="carDetail.id">
                    <count-down ref="cdNumber" :time="carDetail.screenSeconds || 120" @over="close"/>s
                </b>
            </my-header>
            <div class="mainBox">
                <div class="tabBox">
                    <template v-for="dt in menus" :key="dt.id">
                        <span class="tbItem" :class="{'select':(dt.id == index)}"  @click="onTab(dt)">{{dt.name}}</span>
                    </template>
                </div>
                <div class="tabCon">
                    <router-view v-slot="{ Component }">
                        <keep-alive>
                            <component :is="Component"  v-if="$route.meta.keepAlive"/>
                        </keep-alive>
                        <component :is="Component"  v-if="!$route.meta.keepAlive"/>
                    </router-view>
                </div>
            </div>
        </div>
    </page-wrap>
</template>

<script>
import {reactive,toRefs,onMounted,getCurrentInstance,computed} from 'vue'
import {useRouter, useRoute} from 'vue-router'
import {useStore} from 'vuex'
import pageWrap from '@/components/pageWrap.vue'
import myHeader from '@/components/myHeader.vue'
import countDown from '@/components/countDown.vue'
// import otherPaySearch from './components/otherPaySearch.vue'
// import wyPaySelect from './components/wyPaySelect.vue'
// import payPage from './components/payPage.vue'
export default {
    components:{
        pageWrap,
        myHeader,
        countDown,
        // wyPaySelect,
        // otherPaySearch,
        // payPage
    },
    setup() {
        const store = useStore()
        const router = useRouter(), route = useRoute();
        const {proxy} = getCurrentInstance()

        const state = reactive({
            index:1,
            menus:[],
            selectData:'',
            showPay:false,
            st:'',
            carDetail:computed(()=>store.state.carDetail)
        }) 

        onMounted(async() =>{ 
            const res = await store.dispatch('get_payment',{
                communityId:store.state.carDetail.communityId
            })
            if(res.success){
                state.menus = res.data
            } 
     
            if(route.query.id){
                state.index = route.query.id
                //router.push(`/pay/other?id=${route.query.id}`)
            }else{
                setDefaultPage(state.menus[0])
            }
        })
        const setDefaultPage = (data)=>{
            state.index = data.id
            sessionStorage.setItem('paymenttypeid',data.id)
            if(data.isRoom==1){
                router.push(`/pay/wy?id=${data.id}`)
            }else{
                router.push(`/pay/other?id=${data.id}`)
            }
        }

        const onTab = (item)=>{
            state.index = item.id
            sessionStorage.setItem('paymenttypeid',item.id)
            if(item.isRoom==1){ // 需要选择小区房间等
                router.push(`/pay/wy?id=${item.id}`)
            }else{ // 直接手机号查询缴费
                router.push(`/pay/other?id=${item.id}`)
            }
        }

        const getData = (data)=>{
            state.selectData = data,
            state.showPay=true
        }

        const close = ()=>{
            router.push('/main')
        }

        const ckcDown = ()=>{  // 监听页面是否操作
            clearTimeout(state.st)
            proxy.$refs.cdNumber.stopCountDown() // 停止倒计时
            // 10秒操作页面就重新计时
            state.st=setTimeout(() =>{
                proxy.$refs.cdNumber.startCountDown()  // 开始倒计时
            },10000)
        }

        return {
            ...toRefs(state),
            onTab,
            getData,
            close,
            ckcDown
        }

    },
}
</script>

<style lang="scss" scoped>
    .payBox{
       width: 100%;
       height: 100%;
       background: url(/images/pbg.jpg) left bottom no-repeat;
       background-size: 100% auto;
       background-color:#75bfff;
       .tabBox{
           height: 106px;
           line-height: 104px;
           margin: 0 30px;
           font-size: 34px;
           color: #ffffff;
           border-bottom: 2px solid #ffffff;
           text-align: center;
           .tbItem{
               display: inline-block;
               position: relative;
               z-index: 10;
               padding: 0 12px;
               height: 100%;
               cursor: pointer;
               color: #ffffff;
               &+.tbItem{
                   margin: 0 0 0 80px;
               }
               &.select,&.router-link-active{
                   font-weight: 600;
                   &::after{
                       content: '';
                       display: block;
                       position: absolute;
                       z-index: 11;
                       left: 0;
                       bottom: 0;
                       height: 4px;
                       width: 100%;
                       background: #fff;
                   }
               }
           }
       }
       .tabCon{
           padding: 20px 0 0 0;
       }
    }
</style>